<template>
  <div>
    <el-form
      style="margin-left: 100px"
      size="small"
      :model="formData"
      label-width="100px"
      ref="ruleFormRef"
      :rules="rules"
    >
      <el-form-item label="原密码" prop="password">
        <el-input
          type="password"
          show-password
          v-model="formData.password"
          clearable
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newpassword">
        <el-input
          type="password"
          show-password
          v-model="formData.newpassword"
          clearable
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="确认新密码" prop="repassword">
        <el-input
          type="password"
          show-password
          v-model="formData.repassword"
          clearable
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >提交</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { updpwd } from "@/api/user";
import { CODE } from "@/utils/StatusCode";
import { useStore } from "vuex";

const store = useStore();

const userInfo = computed(() => {
  return store.getters.getUserInfo;
});
const router = useRouter();

const ruleFormRef = ref<FormInstance>();

const validatePass = () => {
  return (rule: any, value: string, callback: any) => {
    if (value !== formData.newpassword && formData.newpassword !== "") {
      callback(new Error("两次输入密码不一致!"));
    } else {
      callback();
    }
  };
};
const rules = reactive<FormRules>({
  password: [
    {
      required: true,
      message: "请输入原密码",
      trigger: "blur",
    },
  ],
  newpassword: [
    {
      required: true,
      message: "请输入新密码",
      trigger: "blur",
    },
  ],
  repassword: [
    { required: true, trigger: "blur", message: "请输入密码" },
    {
      trigger: "blur",
      validator: validatePass(),
    },
  ],
});
const formData = reactive({
  password: "",
  newpassword: "",
  repassword: "",
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await updpwd({
        userid: userInfo.value.userid,
        password: formData.password,
        newpassword: formData.newpassword,
      });
      if (res.code == CODE.OK) {
        ElMessage({
          message: res.message,
          type: "success",
          onClose: () => {
            store.dispatch("updateUserInfo", {});
            router.push("/login");
          },
        });
      } else {
        ElMessage({
          message: res.message,
          type: "error",
        });
      }
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang="less" scoped></style>
